<template>
    <div class='starList'>
        <div :class="[`${star}`,`total-${size}`]"
        :style="`margin-right: ${instance}rem`"
        v-for="(star,index) in starArr" :key="index" ></div>
    </div>
</template>

<script>
//传递过来的是评分 边距 大小
export default {
    props:['score','instance','size'],
    data() {
        return {

        };
    },
    computed: {
        //根据score判断给多少星星 1-5 但凡不是整数的都多半颗星
        starArr(){
            const arr = [];
            //找on的个数
            const onNum = Math.floor(this.score)
            for(let i = 0; i < onNum; i++){
                arr.push("on")
            }
            //如果向上取整不等于向下取整则有半星
            if(Math.floor(this.score) !== Math.ceil(this.score)){
                arr.push("self")
            }
            //获取此时的arr长度
            const length = arr.length;
            //用off补足剩下的星星
            for(let offNum = 0; offNum < 5 - length; offNum++){
            arr.push("off")
            }
            return arr
        }
    },
    methods: {},
    mounted() {},
    }
</script>
<style lang="less" scoped>
    .starList{
        display: flex;
    }
    .total-24{
        background-size: cover !important;
        width: 24rem;
        height: 24rem;
        &.on{
            background: url('./img/star24_on@2x.png');
        }
        &.self{
            background: url('./img/star24_half@2x.png');
        }
        &.off{
            background: url('./img/star24_off@2x.png');
        }
    }
    .total-36{
        width: 36rem;
        height: 36rem;
        background-size: cover !important;
        &.on{
            background: url('./img/star36_on@2x.png');
        }
        &.self{
            background: url('./img/star36_half@2x.png');
        }
        &.off{
            background: url('./img/star36_off@2x.png');
        }
    }
    .total-48{
        background-size: cover !important;
        width: 48rem;
        height: 48rem;
        &.on{
            background: url('./img/star48_on@2x.png');
        }
        &.self{
            background: url('./img/star48_half@2x.png');
        }
        &.off{
            background: url('./img/star48_off@2x.png');
        }
    }
</style>